﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
   <link rel="stylesheet" href="/static/css/compiled/new-user.css" type="text/css" media="screen" />
{% endblock %}

{% block content %}
<div class="container-fluid">
            <div id="pad-wrapper" class="new-user">
                <div class="row-fluid header">
                    <h3>添加商品</h3>
                </div>

                <div class="row-fluid form-wrapper">
                    <!-- left column -->
                    <div class="span9 with-sidebar">
                        <div class="container">
                            {% if sign%}
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>成功!</strong> 添加产品：{{form.name.value}}
                            </div>
                            {%endif%}


                            <!--遍历传回表单数据中，将其中的错误信息显示出来-->
                            <div id="error_div">
                                {% if error%}
                                <div class="alert alert-danger" role="alert">
                                    {%for field in form%}
                                        {{field.errors}}  
                                    {%endfor%}
                                </div>
                                {%endif%}
                            </div>

                            <form class="new_user_form" method="post" id="fm">
                                <div class="span12 field-box">
                                    <label>商品名称:</label>
                                    <input class="span9" type="text" name="name" />
                                </div>
                                <div class="span12 field-box">
                                    <label>商品类型:</label>
                                    <div class="ui-select span5">
                                        <select name="kind">
                                            <option value="0" />默认
                                            <option value="1" />食品酒水
                                            <option value="2" />家居生活
                                            <option value="3" />数码电器
                                            <option value="4" />服装鞋类
                                            <option value="5" />工业制品
                                            <option value="6" />其它类别
                                        </select>
                                    </div>
                                </div>
                                <div class="span12 field-box">
                                    <label>库存数量:</label>
                                    <input class="span9" type="text" value="0" name="inventory"/>
                                </div>                                
                                <div class="span12 field-box">
                                    <label>进货价格:</label>
                                    <input class="span9" type="text" name="cost" />
                                </div>

                                <div class="span12 field-box">
                                    <label>建议售价:</label>
                                    <input class="span9" type="text" name="price" />
                                </div>
                                <div class="span12 field-box">
                                    <label>产地:</label>
                                    <input class="span9" type="text" name="producer"/>
                                </div>
                                <div class="span12 field-box textarea">
                                    <label>商品介绍:</label>
                                    <textarea class="span9" name="notes"></textarea>
                                    <span class="charactersleft">90 characters remaining. Field limited to 100 characters</span>
                                </div>
                                <div class="span11 field-box actions">
                                    <input type="submit" class="btn-glow primary" value="添加商品" />
                                    <span>OR</span>
                                    <input type="reset" value="取消" class="reset" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

 {% block customizedJS %}
 <script type="text/javascript">
        $(function () {

            //当输入框获取焦点时，清空错误提示容器中的错误信息-->
            $("#fm input").focus(function(){
                $("#error_div").animate({height:'0px'},"slow");
                $("#error_div").html("");
            });
            // toggle form between inline and normal inputs
            var $buttons = $(".toggle-inputs button");
            var $form = $("form.new_user_form");

            $buttons.click(function () {
                var mode = $(this).data("input");
                $buttons.removeClass("active");
                $(this).addClass("active");

                if (mode === "inline") {
                    $form.addClass("inline-input");
                } else {
                    $form.removeClass("inline-input");
                }
            });
        });
    </script>
{% endblock %}